<template>
	<view class="container">
		<view class="top">
			<image class="food-img" :src="food_img"></image>
			<view class="food-name">{{ food_name }}</view>
		</view>
		<view class="service">
			<!--评分-->
			<view class='score'>
				<view class='right'>
					<view class='left'>评分</view>
					<view @click="starIndex = index"  class="star" v-for="(item,index) in stars" :key="index">
						<image :src="item"></image>
					</view>
					<text class='rtxt'>{{ score }}分</text>
				</view>
			</view>
			<!--服务评价-->
			<!-- <view class='content'>
				<view class='right'>
					<view class='left'>服务评价</view>
					<view class="text-area" v-for="(item,index) in arr" :key="item.index">
						<text :class="isActive===index? 'title':''" @click="btn(index)">{{item}}</text>
					</view>
				</view>
			</view> -->
		</view>
		<!--textarea-->
		<view class="conts">
			<textarea class="areas" placeholder='更多评价请写在这里（最多100字）' maxlength="max" v-model="content"></textarea>
		</view>
		<!--提交评价-->
		<view class="bottom">
			<button class="btn" @click="submitComment()" :disabled="isCanSubmit">提交评价</button>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				arr: [
					'口味好', '上菜速度快', '门店环境好', '服务好'
				],
				stars: [
					"/static/image/star.png",
					"/static/image/star.png",
					"/static/image/star.png",
					"/static/image/star.png",
					"/static/image/star.png"
				],
				starIndex: 0,
				score: 0,
				max: 100, //最多字数 (根据自己需求改变) 
				content: '',
				order_id: 0,
				food_id: 0,
				food_name: '',
				food_img: ''
			};
		},
		onLoad(args) {
			if (!args.order_id || !args.food_id || !args.img || !args.name) {
				uni.showToast({
					'title': '参数错误',
					'icon': 'none'
				})
				uni.navigateBack({})
			}
			this.order_id = args.order_id;
			this.food_id = args.food_id;
			this.food_name = args.name;
			this.food_img = args.img;
		},
		computed: {
			isCanSubmit() {
				if (this.score > 0 && this.content.trim().length > 0) {
					return false;
				}
				return true;
			}
		},
		watch: {
			starIndex(index) {
				let temp = this.stars
				let score = 0;
				for (let i in temp) {
					if (i <= index) {
						temp[i] = "/static/image/star-active.png"
						score++;
					} else {
						temp[i] = "/static/image/star.png"
					}
				}
				this.stars = temp;
				this.score = score;
			}
		},
		methods: {
			submitComment() {
				uni.showLoading({
					'title': '评价中...'
				})
				let comment = {
					order_id: this.order_id,
					user_id: uni.getStorageSync('user_id'),
					food_id: this.food_id,
					score: this.score,
					content: this.content
				}
				uni.request({
					url: 'https://restaurant.lgdweb.com/api/comment/add/',
					data: comment,
					method: 'post',
					success: res => {
						if (res.data.status == 0) {
							uni.showToast({
								'title': '评价成功',
								duration: 2000,
								success: () => {
									setTimeout(() => {
										uni.navigateBack({})
									}, 500)
								}
							});
						} else {
							uni.showToast({
								'title': '评价失败',
								'icon': 'error'
							})
						}
					},
					fail: err => {
						console.log(err)
						uni.showToast({
							'title': '评价失败',
							'icon': 'error'
						})
					}
				});
			}
		}
	}
</script>

<style>
	.container {
		height: 100vh;
		padding: 30rpx 30rpx 0 30rpx;
		background-color: white;
	}
	.title {
		color: pink;
	}
	.food-img {
		width: 130rpx; height: 130rpx;
		border-radius: 10rpx;
	}
	.food-name {
		margin-left: 30rpx;
	}

	.time {
		margin-left: 140px;
	}

	.top {
		display: flex;
		align-items: center;
	}

	.service {
		width: 100%;
		overflow: hidden;
		box-sizing: border-box;
		background: #fff;
	}

	.score {
		width: 100%;
		height: 100rpx;
		border-bottom: 1px solid #ccc;
	}

	.star {
		float: left;
		width: 54rpx;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
	}

	.star image {
		width: 40rpx;
		height: 40rpx;
		margin-top: 30rpx;
	}

	.score .left {
		width: 100rpx;
		line-height: 100rpx;
		font-size: 30rpx;
		float: left;
	}

	.score .right {
		width: 610rpx;
		font-size: 30rpx;
		float: left;
		color: #888;
	}

	.score .right .rtxt {
		display: inline-block;
		height: 100rpx;
		line-height: 100rpx;
		margin-left: 15rpx;
		color: #FF6600;
		font-weight: bold;
	}

	.labelColor {
		color: #FF6600;
		border: 1px solid #FF6600 !important;
	}

	.content {
		width: 100%;
		overflow: hidden;
		border-bottom: 1px solid #ccc;
		padding: 0 0 26rpx 0;
		box-sizing: border-box;
	}

	.content .left {
		width: 100rpx;
		font-size: 30rpx;
		float: left;
		padding-top: 20rpx;
	}

	.content .right {
		width: 610rpx;
		font-size: 24rpx;
		float: left;
		color: #888;
	}

	.content .right text {
		font-size: 24rpx;
		padding: 13rpx 24rpx;
		float: left;
		border: 1px solid #888;
		border-radius: 10rpx;
		margin-right: 34rpx;
		margin-top: 20rpx;
	}

	.picture {
		width: 100%;
		overflow: hidden;
		background: #fff;
		border-bottom: 1px solid #ccc;
	}

	.picture .left {
		width: 100rpx;
		font-size: 30rpx;
		float: left;
		padding-top: 20rpx;
	}

	.picture .right {
		width: 610rpx;
		font-size: 24rpx;
		float: left;
		color: #888;
		box-sizing: border-box;
		padding-top: 36rpx;
	}

	.picture .right .add {
		width: 120rpx;
		height: 120rpx;
		margin-right: 10rpx;
	}

	.According {
		width: 120rpx;
		height: 120rpx;
		float: left;
		margin-right: 10rpx;
		margin-bottom: 10rpx;
	}

	.parcel {
		width: 120rpx;
		height: 120rpx;
		float: left;
		margin-right: 10rpx;
		margin-bottom: 10rpx;
		position: relative;
	}

	.deleteimg {
		width: 30rpx;
		height: 30rpx;
		position: absolute;
		right: 0;
		top: 0;
		z-index: 2;
	}

	.conts {
		width: 100%;
		height: auto;
		background: #fff;
	}

	textarea {
		width: 687rpx;
	}

	.areas {
		height: 580rpx;
		font-size: 30rpx;
		padding-top: 30rpx;
		overflow: hidden;
		position: relative;
	}

	.hint {
		font-size: 28rpx;
		position: absolute;
		top: 120rpx;
		left: 30rpx;
		color: #FF6600;
	}
	
	.bottom {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.btn {
		width: 600rpx;
		height: 80rpx;
		line-height: 43rpx;
		font-size: 30rpx;
		color: #fff;
		background: #FF6600;
		position: fixed;
		display: flex;
		justify-content: center;
		align-items: center;
		bottom: 30rpx;
	}

	button:after {
		border: 0;
	}
</style>
